<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <!-- 
        浮动元素的特点:
            1）浮动元素脱标 （半脱离，有字围效果）
            2）包裹性  如果没有设置宽度，浮动的元素宽度只会包裹内容
     -->
    <div class="box">
        <div class="item" style="float: left; height:100px; background:red">son1</div>
    </div>
</body>

</html>